<template>
    <div class="QilinKaitify">
        <Wrapper
            ref="wrapperRef"
            v-model="ownValue"
            :hideBubbleOnMousedown="ownKaitifyConfig.hideBubbleOnMousedown || false"
            :bubbleProps="{
                visible:shouldVisible,
                match:bubbleMatch,
                zIndex:ownKaitifyConfig?.bubbleProps?.zIndex
            }"
            :disabled="ownKaitifyConfig.disabled || false"
            :placeholder="ownKaitifyConfig.placeholder || '请输入内容...'"
            :allow-paste-html="ownKaitifyConfig.allowPasteHtml ?? true"
            :locale="ownKaitifyConfig.locale || 'zh-cn'"
            :autofocus="ownKaitifyConfig.autofocus || false"
            :dark="ownKaitifyConfig.dark || false"
            :allow-copy="ownKaitifyConfig.allowCopy ?? true"
            :allow-paste="ownKaitifyConfig.allowPaste ?? true"
            :allow-cut="ownKaitifyConfig.allowCopy ?? true"
            :onPasteImage="(file)=>{
                if(ownKaitifyConfig.onPasteImage){
                    ownKaitifyConfig.onPasteImage(wrapperRef,file);
                    return false;
                }
                return true;
            }"
            :onPasteVideo="(file)=>{
                if(ownKaitifyConfig.onPasteVideo){
                    ownKaitifyConfig.onPasteVideo(wrapperRef,file);
                    return false;
                }
                return false;
            }"
            :onPasteFile="(file)=>{
                if(ownKaitifyConfig.onPasteFile){
                    ownKaitifyConfig.onPasteFile(wrapperRef,file);
                    return false;
                }
                return true;
            }"
            :style="ownKaitifyConfig.style || {width:'100%',height:'300px'}"
            @blur="handleBlur"
        >
            <template #before>
                <div class="menuList">
                    <el-tooltip content="撤销">
                        <UndoMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="重做">
                        <RedoMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="减少缩进">
                        <DecreaseIndentMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="增加缩进">
                        <IncreaseIndentMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="清除格式">
                        <ClearFormatMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="加粗">
                        <BoldMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="斜体">
                        <ItalicMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="删除线">
                        <StrikethroughMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="下标">
                        <SubscriptMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="上标">
                        <SuperscriptMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="下划线">
                        <UnderlineMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="行内代码">
                        <CodeMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="文本字体颜色">
                        <ColorMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="文本背景色">
                        <BackColorMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="字体">
                        <FontFamilyMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="字号">
                        <FontSizeMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="标题">
                        <HeadingMenu :shortcut="{ 1: e => e.key == '1' && e.metaKey }" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="行高">
                        <LineHeightMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="有序列表">
                        <OrderedListMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="无序列表">
                        <UnorderedListMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="待办">
                        <TaskMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="左对齐">
                        <AlignLeftMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="居中对齐">
                        <AlignCenterMenu :shortcut="e => e.key == 'b' && e.metaKey" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="右对齐">
                        <AlignRightMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="两端对齐">
                        <AlignJustifyMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="引用">
                        <BlockquoteMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="代码块">
                        <CodeBlockMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="水平线">
                        <HorizontalMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="链接">
                        <LinkMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="附件">
                        <AttachmentMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="图片">
                        <ImageMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" v-bind="ownKaitifyConfig.menuImageProps"
                            :customUpload="(file)=>{
                                ownKaitifyConfig.menuImageProps.customUpload(wrapperRef,file);
                            }"
                        />
                    </el-tooltip>
                    <el-tooltip content="视频">
                        <VideoMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="数学公式">
                        <MathMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格">
                        <TableMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="全屏">
                        <FullScreenMenu target=".QilinKaitify" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                </div>
            </template>
            <template #bubble="{state}">
                <div v-if="state.editor?.commands.getVideo?.()" style="padding: 5px;">
                    <el-tooltip content="视频显示器控制">
                        <VideoControlsMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="视频静音控制">
                        <VideoMutedMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="视频循环控制">
                        <VideoLoopMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                </div>
                <div v-else-if="state.editor?.commands.getCodeBlock?.()" style="padding: 5px;">
                    <el-tooltip content="向上换行">
                        <WrapUpMenu :match="{ tag: 'pre' }" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="代码块语言选择">
                        <CodeBlockLanguagesMenu :languages="['java', 'javascript']" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="向下换行">
                        <WrapDownMenu :match="{ tag: 'pre' }" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                </div>
                <div v-else-if="!!state.editor?.getFocusNodesBySelection('text').length" style="padding: 5px;">
                    <el-tooltip content="清除格式">
                        <ClearFormatMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="加粗">
                        <BoldMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="斜体">
                        <ItalicMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="删除线">
                        <StrikethroughMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="下标">
                        <SubscriptMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="上标">
                        <SuperscriptMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="下划线">
                        <UnderlineMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="文本字体颜色">
                        <ColorMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="文本背景色">
                        <BackColorMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="行内代码">
                        <CodeMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="字体">
                        <FontFamilyMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="字号">
                        <FontSizeMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                </div>
                <div v-else-if="!!state.editor?.commands.getLink?.()" style="padding: 5px;">
                    <el-tooltip content="取消链接">
                        <LinkUnsetMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                </div>
                <div v-else-if="state.editor?.commands.getTable?.()" style="padding: 5px;">
                    <el-tooltip content="向上换行">
                        <WrapUpMenu :match="{ tag: 'table' }" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="表格向上添加行">
                        <TableAddRowMenu type="top" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格向下添加行">
                        <TableAddRowMenu type="bottom" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格删除行">
                        <TableDeleteRowMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格向左添加列">
                        <TableAddColumnMenu type="left" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格向右添加列">
                        <TableAddColumnMenu type="right" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格删除列">
                        <TableDeleteColumnMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="表格向左单元格合并">
                        <TableMergeCellMenu direction="left" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格向右单元格合并">
                        <TableMergeCellMenu direction="right" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格向上单元格合并">
                        <TableMergeCellMenu direction="top" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <el-tooltip content="表格向下单元格合并">
                        <TableMergeCellMenu direction="bottom" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="删除表格">
                        <TableUnsetMenu :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                    <Divider :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    <el-tooltip content="向下换行">
                        <WrapDownMenu :match="{ tag: 'table' }" :popoverProps="ownKaitifyConfig.menuPopoverProps" />
                    </el-tooltip>
                </div>
            </template>
        </Wrapper>
    </div>
</template>

<script setup>
import {defineOptions,computed,ref,nextTick} from "vue";
import {Wrapper,Menu,BoldMenu, AlignLeftMenu, AlignCenterMenu, AlignRightMenu, AlignJustifyMenu, AttachmentMenu, BackColorMenu, BlockquoteMenu, CodeMenu, CodeBlockMenu, ColorMenu, FontFamilyMenu, FontSizeMenu, HeadingMenu, RedoMenu, UndoMenu, HorizontalMenu, ImageMenu, IncreaseIndentMenu, DecreaseIndentMenu, ItalicMenu, LineHeightMenu, LinkMenu, OrderedListMenu, UnorderedListMenu, MathMenu, StrikethroughMenu, SubscriptMenu, SuperscriptMenu, TableMenu, UnderlineMenu, VideoMenu, TaskMenu, WrapUpMenu, WrapDownMenu, CodeBlockLanguagesMenu, TableUnsetMenu, TableDeleteRowMenu, TableDeleteColumnMenu, TableAddRowMenu, TableAddColumnMenu, TableMergeCellMenu, VideoControlsMenu, VideoMutedMenu, VideoLoopMenu, ClearFormatMenu, Divider, LinkUnsetMenu,FullScreenMenu} from "@kaitify/vue";


/*
    响应式选项区域
*/
defineOptions({
    name:"QilinKaitify"
});
// 接收来自父组件的传参
const propsValue = defineProps({
    kaitifyConfig:{
        type:Object,
        default(){
            return {
                disabled:false, //是否禁用编辑器-默认false
                locale:"zh-cn", //编辑器语言环境，默认zh-cn
                hideBubbleOnMousedown:false, //鼠标在编辑器内按下时是否隐藏气泡栏，默认false，若设为true，则即使bubbleProps的visible为true，也不显示气泡栏
                bubbleProps:{
                    visible:true, //是否显示气泡栏，默认true
                    zIndex:5, //气泡栏的z-index层级，默认为5
                },
                menuPopoverProps:{ //菜单组件的浮层属性配置
                    zIndex:10, //浮层的z-index层级，默认为10
                    arrow:true, //浮层是否显示三角形
                },
                menuImageProps:{ //image图片菜单组件的属性
                    customUpload:(file)=>{} //自定义本地图片上传的方法，该方法返回一个字符串值，表示上传后的图片文件地址，回调参数为 File 文件，如果不设置该方法，图片默认以 base64 字符串的形式插入编辑器中
                },
                autofocus:false, //编辑器渲染后是否自动聚焦，默认false
                placeholder:"请输入内容...", //编辑器的占位内容
                dark:false, //编辑器是否呈深色风格
                style:"", //编辑器样式
                allowCopy:true, //是否允许复制操作，默认true
                allowPaste:true, //是否允许粘贴操作，默认true
                allowCut:true, //是否允许剪切操作，默认true
                allowPasteHtml:true, //是否允许粘贴html，即粘贴内容是否携带样式，默认true
                onPasteImage:(editor,file)=>{}, //编辑器粘贴图片时触发，返回true表示使用默认逻辑，返回false表示进行自定义处理
                onPasteVideo:(editor,file)=>{}, //编辑器粘贴图片时触发，返回true表示使用默认逻辑，返回false表示进行自定义处理，这边默认封装的是自定义处理
                onPasteFile:(editor,file)=>{}, //编辑器粘贴除了图片和视频以外的文件时触发，需要自定义处理
            }
        }
    },
    modelValue:{ //回显内容
        type:String,
        default:""
    }
});
const emits = defineEmits(["update:modelValue","success"]);


/*
    数据变量定义区域
*/
const wrapperRef = ref(null); //获取编辑器元素DOM
const bubbleMatch = ref(null);


/*
    计算属性等代码区域
*/
// 组件自身的配置项
const ownValue = computed({
    get(){
        return propsValue.modelValue;
    },
    set(val){
        emits("update:modelValue",val);
    }
});
const ownKaitifyConfig = computed({
    get(){
        return propsValue.kaitifyConfig;
    }
});

const shouldVisible = computed(() => {
    if (!wrapperRef.value) {
        return false
    }
    if (!!wrapperRef.value.state.editor?.commands.getVideo()) {
        bubbleMatch.value = { tag: 'video' }
        return true
    }
    if (!!wrapperRef.value.state.editor?.commands.getCodeBlock()) {
        bubbleMatch.value = { tag: 'pre' }
        return true
    }
    if (!!wrapperRef.value.state.editor?.getFocusNodesBySelection('text').length) {
        bubbleMatch.value = undefined
        return true
    }
    if (!!wrapperRef.value.state.editor?.commands.getLink()) {
        bubbleMatch.value = { tag: 'a' }
        return true
    }
    if (!!wrapperRef.value.state.editor?.commands.getTable()) {
        bubbleMatch.value = { tag: 'table' }
        return true
    }
    return false
});


/*
    逻辑脚本代码区域
*/
// 编辑器失去焦点事件监听
const handleBlur=(event)=>{
    // console.log(wrapperRef.value.state.editor.getContent(),"======");
    const isNull = wrapperRef.value.state.editor.stackNodes.length == 1 && wrapperRef.value.state.editor.isParagraph(wrapperRef.value.state.editor.stackNodes[0]) && wrapperRef.value.state.editor.stackNodes[0].allIsPlaceholder();
    emits("success",isNull);
};


/*
    生命周期等代码区域
*/


</script>

<style lang="scss" scoped>
.QilinKaitify{
    background-color:#fff;
}
.menuList{
    border:1px solid $border-color;
    margin-bottom:10px;
    display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
    border-radius:3px;
}
</style>
